<template>
  <div class="page4 wow" style="visibility: visible">
    <h2 class="wow" style="visibility: visible">服务团队</h2>
    <div class="swipers wow" style="visibility: visible">
      <swiper
        :loop="true"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
        slidesPerView="auto"
        :space-between="20"
        :modules="modules"
        :pagination="pagination"
      >
        <swiper-slide v-for="(item,index) in List" :key="index">
          <div class="wrap">
            <div class="pic">
              <img
                :src="item.image"
                alt=""
              />
            </div>
            <div class="text">
              <div>
                <p>{{ item.dis }}</p>
              </div>
              <h2>{{ item.title }}</h2>
            </div>
            <i
              ><img
                src="https://www.shbotao.net//uploads/allimg/20211122/8a4b36c9ae51d9914d284ff8bf01c5d3.png"
                alt=""
            /></i>
          </div>
        </swiper-slide>
        <div class="swiper-pagination pagin"></div>
      </swiper>
    </div>
  </div>
</template>

<script setup>
import { Pagination, A11y } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import { ref } from 'vue'
const pagination = ref({
  el: '.pagin'
})
const modules = ref([Pagination, A11y])
const List = ref([
  {
    image: 'https://www.shbotao.net//uploads/allimg/20211127/ce3f7e007d69184d10deec9957b65207.png',
    title: '设计服务',
    dis: '预算师 设计师 设计助理 中心经理 效果图设计师'
  },
  {
    image: 'https://www.shbotao.net//uploads/allimg/20211127/ce3f7e007d69184d10deec9957b65207.png',
    title: '设计服务',
    dis: '预算师 设计师 设计助理 中心经理 效果图设计师'
  },
  {
    image: 'https://www.shbotao.net//uploads/allimg/20211127/ce3f7e007d69184d10deec9957b65207.png',
    title: '设计服务',
    dis: '预算师 设计师 设计助理 中心经理 效果图设计师'
  },
  {
    image: 'https://www.shbotao.net//uploads/allimg/20211127/ce3f7e007d69184d10deec9957b65207.png',
    title: '设计服务',
    dis: '预算师 设计师 设计助理 中心经理 效果图设计师'
  },
  {
    image: 'https://www.shbotao.net//uploads/allimg/20211127/ce3f7e007d69184d10deec9957b65207.png',
    title: '设计服务',
    dis: '预算师 设计师 设计助理 中心经理 效果图设计师'
  },
  {
    image: 'https://www.shbotao.net//uploads/allimg/20211127/ce3f7e007d69184d10deec9957b65207.png',
    title: '设计服务',
    dis: '预算师 设计师 设计助理 中心经理 效果图设计师'
  },
  {
    image: 'https://www.shbotao.net//uploads/allimg/20211127/ce3f7e007d69184d10deec9957b65207.png',
    title: '设计服务',
    dis: '预算师 设计师 设计助理 中心经理 效果图设计师'
  }
])
const iniswiper = ref(null)
const onSwiper = (swiper) => {
  iniswiper.value = swiper
}
</script>

<style>
.cherrypick .page4 {
  height: 12rem;
  background: #132132;
  padding: 1rem 0;
  position: relative;
  overflow: hidden;
}

.cherrypick .page4 > h2 {
  font-size: 0.56rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 1rem;
  opacity: 0;
  -webkit-animation: slide-down-in 1s, fade-in 1s;
  animation: slide-down-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.cherrypick .page4 .swipers {
  transform: translateX(0.3rem);
  width: 8.5rem;
  opacity: 0;
  animation: fade-in 1s;
  animation-fill-mode: forwards;
}
.cherrypick .page4 .swiper {
  padding-bottom: 0.5rem;
}

.cherrypick .page4 .swiper .swiper-slide {
  width: 32% !important;
}
.cherrypick .page4 .swiper .wrap {
  height: 7.41rem;
  background: #fff;
  border-radius: 0.1rem;
  padding: 0.2rem 0.17rem;
  position: relative;
}

.cherrypick .page4 .swiper .wrap .pic img {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.1rem;
  display: block;
}

.cherrypick .page4 .swiper .wrap .text {
  width: 100%;
  height: 4.71rem;
  display: flex;
  flex-wrap: wrap;
}

.cherrypick .page4 .swiper .wrap .text div {
  width: 100%;
  height: 4.3rem;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.cherrypick .page4 .swiper .wrap .text div p {
  width: 100%;
  font-size: 0.24rem;
  font-weight: 400;
  color: #666;
  line-height: 0.42rem;
  text-align: center;
  white-space: pre-wrap;
}

.cherrypick .page4 .swiper .wrap .text h2 {
  width: 100%;
  font-size: 0.32rem;
  font-weight: 700;
  text-align: center;
  color: #000;
  height: 0.4rem;
}

.cherrypick .page4 .swiper .wrap i {
  width: 0.75rem;
  height: 0.75rem;
  background: #ed5401;
  box-shadow: 0 0.1rem 0.3rem 0 rgba(237, 84, 0, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 2.22rem;
  left: 0.99rem;
}

.cherrypick .page4 .swiper .wrap i img {
  max-width: 0.36rem;
}

.cherrypick .page4 .swiper .swiper-slide:nth-child(2n) .wrap {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between
}

.cherrypick .page4 .swiper .swiper-slide:nth-child(2n) .wrap .pic {
    order: 2
}

.cherrypick .page4 .swiper .swiper-slide:nth-child(2n) .wrap .text {
    order: 1
}

.cherrypick .page4 .swiper .swiper-slide:nth-child(2n) .wrap .text div {
    order: 2
}

.cherrypick .page4 .swiper .swiper-slide:nth-child(2n) .wrap .text h2 {
    order: 1;
    padding-top: .3rem
}

.cherrypick .page4 .swiper .swiper-slide:nth-child(2n) i {
    top: 4.8rem;
    left: .99rem
}

.cherrypick .page4 .swiper .swiper-pagination .swiper-pagination-bullet:not(:last-child) {
  margin-right: 0.15rem !important;
}
</style>